<template>
	<view class="form">
		<view class="tip">添加银行卡</view>
		<view class="item">
			<view class="label">银行卡号</view>
			<view class="value">
				<uv-input border="none" v-model="state.submitData.cardNumber" placeholder="请输入银行卡号"
					@blur="handleQueryCard"></uv-input>
			</view>
		</view>
		<view class="item">
			<view class="label">持卡人姓名</view>
			<view class="value">
				<uv-input border="none" v-model="state.submitData.name" placeholder="请输入持卡人姓名"></uv-input>
			</view>
		</view>
		<view class="item">
			<view class="label">银行名称</view>
			<view class="value">
				<uv-input border="none" :value="state.submitData.bankName" readonly
					placeholder="请输入银行卡号自动查询银行名称"></uv-input>
			</view>
		</view>
		<view class="item">
			<view class="label">银行卡类型</view>
			<view class="value">
				<uv-input border="none" :value="state.submitData.cardTypeName" readonly
					placeholder="请输入银行卡号自动查询银行卡类型"></uv-input>
			</view>
		</view>
		<view class="item">
			<view class="label">开户行名</view>
			<view class="value">
				<uv-input border="none" v-model="state.submitData.accountBank" placeholder="请输入开户行名"></uv-input>
			</view>
		</view>
		<view class="item">
			<view class="label">开户行地址</view>
			<view class="value" @click="handleShowPicker">
				<uv-input border="none" :value="state.city" readonly placeholder="请选择开户行地址"></uv-input>
			</view>
		</view>
		<view class="item">
			<uv-checkbox-group shape="circle" @change="handleCheckbox">
				<uv-checkbox activeColor="red" label="勾选将设为默认提现账户" name="勾选将设为默认提现账户"></uv-checkbox>
			</uv-checkbox-group>
		</view>

		<coreshop-select-city :show="state.showSelectCity" @handleClosePicker="handleClosePicker"
			@handleConfirmPicker="handleConfirmPicker"></coreshop-select-city>

		<coreshop-button class="save" title="保存" @onClick="onSaveBankCard()"></coreshop-button>
	</view>
</template>

<script setup lang="ts">
	import { reactive } from 'vue';
	import { queryAreaId, queryBankCardsOrganization, queryAddBankCards } from '@/core/api';
	import type { Response } from '@/core/models';
	import { handleShowToast } from '@/core/utils';

	interface SubmitDataType {
		cardNumber : string | null;  /** 银行卡号 */
		name : string | null;               /** 开户人姓名 */
		bankName : string | null;           /** 银行名称 */
		bankCode : string | null;           /** 银行缩写码 */
		accountBank : string | null;        /** 开户行名称 */
		cardType : number;           /** 卡类型 */
		cardTypeName : string | null;       /** 卡片类型 */
		isDefault : number;         /** 是否默认 */
	}

	const emits = defineEmits(['onSave']);

	const state = reactive<{
		showSelectCity : boolean;
		city : string;
		submitData : SubmitDataType;
		areaId : number;
	}>({
		showSelectCity: false,
		city: "",
		areaId: 0,
		submitData: {
			cardNumber: null,
			name: null,
			bankName: null,
			bankCode: null,
			accountBank: null,
			cardType: 1,
			cardTypeName: null,
			isDefault: 0,
		},
	})

	/** 查询银行卡 */
	const handleQueryCard = async () => {
		if (state.submitData.cardNumber) {
			const bankCard : Response<any> = await queryBankCardsOrganization({ id: state.submitData.cardNumber });
			if (bankCard.status) {
				state.submitData.bankName = bankCard.data.name;
				state.submitData.cardType = bankCard.data.type;
				state.submitData.bankCode = bankCard.data.bankCode;
				state.submitData.cardTypeName = bankCard.data.typeName;
			} else {
				handleShowToast(bankCard.msg)
			}
		}
	}

	const handleCheckbox = (e : Array<string>) => {
		if (e.length > 0) {
			state.submitData.isDefault = 1;
		} else {
			state.submitData.isDefault = 0;
		}
	}

	/** 打开省市区选择弹框 */
	const handleShowPicker = () => {
		state.showSelectCity = true;
	}

	/** 关闭省市区选择弹框 */
	const handleClosePicker = () => {
		state.showSelectCity = false;
	}

	/** 省市区确认选择 */
	const handleConfirmPicker = async (data : any) => {
		const areaId : Response<number> = await queryAreaId({
			provinceName: data[0].label,
			provinceId: data[0].value,
			cityName: data[1].label,
			cityId: data[1].value,
			countyName: data[2].label,
			countyId: data[2].value,
		})
		if (areaId.status) {
			state.areaId = areaId.data;
			state.city = `${data[0].label} ${data[1].label} ${data[2].label}`;
		} else {
			uni.showModal({
				title: '提示',
				content: '地区选择出现问题，请重新选择地区',
				showCancel: false
			});
		}
	}

	const onSaveBankCard = async () => {
		if (!state.submitData.bankName) {
			handleShowToast('请输入银行卡号'); return;
		}
		if (!state.submitData.bankName || !state.submitData.cardType || !state.submitData.bankCode) {
			handleShowToast('请输入正确的银行卡号'); return;
		}
		if (!/^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,30}$/.test(state.submitData.name)) {
			handleShowToast('请输入正确的持卡人名称'); return;
		}
		if (state.areaId <= 0) {
			handleShowToast('请选择开户行所在地区'); return;
		}
		if (!state.submitData.accountBank) {
			handleShowToast('请输入开户银行信息'); return;
		}
		const bankCards : Response<any> = await queryAddBankCards({
			bankName: state.submitData.bankName,
			bankCode: state.submitData.bankCode,
			bankAreaId: state.areaId,
			accountBank: state.submitData.accountBank,
			accountName: state.submitData.name,
			cardNumber: state.submitData.cardNumber,
			cardType: state.submitData.cardType,
			isDefault: state.submitData.isDefault
		});
		if (bankCards.status) {
			emits('onSave');
			handleShowToast(bankCards.msg, 'success');
		} else {
			handleShowToast(bankCards.msg);
		}
	}
</script>

<style scoped lang="scss">
	.form {
		padding: 40rpx;

		.tip {
			text-align: center;
			font-size: 38rpx;
			color: #292B2E;
			margin-bottom: 40rpx;
		}

		.item {
			margin-bottom: 20rpx;

			.label {
				font-size: 28rpx;
				color: #292B2E;
				margin-bottom: 10rpx;
			}

			.value {
				background-color: #f3f3f3;
				border-radius: 10rpx;
				padding: 10rpx;
			}
		}

		.save {
			display: block;
			margin-top: 50rpx;
		}
	}
</style>